<template>
    <div>
        <el-form :model="form" label-width="100px" :rules="rules" style="width: 700px;" ref="form">
            <el-form-item label="电影院名称" prop="cinema_name">
                <el-input v-model="form.cinema_name"></el-input>
            </el-form-item>
            <el-form-item label="选择位置">
                <div style="height:200px; border: 1px solid rgb(203, 203, 203);" id="container">
                </div>
            </el-form-item>
            <el-form-item label="详细地址" prop="address">
                <el-input v-model="form.address"></el-input>                 
            </el-form-item>                                                                 
            <el-form-item label="省份"    prop="province">                          
                <el-input v-model="form.province"></el-input>               
            </el-form-item>
            <el-form-item label="城市"  prop="city">
                <el-input v-model="form.city"></el-input>
            </el-form-item>
            <el-form-item label="地区"  prop="district">
                <el-input v-model="form.district"></el-input>
            </el-form-item>
            <el-form-item label="经度"  prop="longitude">

                <el-input v-model="form.longitude"></el-input>
            </el-form-item>
            <el-form-item label="纬度" prop="latitude">
                <el-input v-model="form.latitude"></el-input>
            </el-form-item>
            <el-form-item label="选择标签" prop="tags">
                <el-select style="width:100%;" v-model="form.tags" multiple>
                    <el-option v-for="TagsItem in tagsList" :key="TagsItem.id" :label="TagsItem.tagname" :value="TagsItem.tagname"></el-option>
                </el-select>
            </el-form-item>   
            <el-form-item>
                <el-button type="primary" @click="addCinema">新增影院</el-button>
                <el-button>取消</el-button>
            </el-form-item>         
        </el-form>
    </div>
</template>

<script>
    import AMapLoader from '@amap/amap-jsapi-loader';
    import httpApi from '@/http';
    window._AMapSecurityConfig = {
        securityJsCode: "750368341bcc1745edfb2bc4df4e0724",
    };

    export default {
        data() {
            return {
                form: {
                    cinema_name:'',
                    address:'',
                    province:'',
                    city:'',
                    district:'',
                    longitude:'',
                    latitude:'',
                    tags:'',
                },
                tagsList:[],
                rules:{
                    cinema_name:[{required:true,message:'影院名称不能为空',trigger:'blur'}],
                    address:[{required:true,message:'影院地址不能为空',trigger:'blur'}],
                    province:{required:true,message:'影院所在省份不能为空',trigger:'blur'},
                    city:{required:true,message:'影院城市不能为空',trigger:'blur'},
                    district:{required:true,message:'影院地区不能为空',trigger:'blur'},
                    longitude:{required:true,message:'影院经度不能为空',trigger:'blur'},
                    latitude:{required:true,message:'影院纬度不能为空',trigger:'blur'},
                    tags:{required:true,message:'影院标签不能为空',trigger:'blur'},
                }
            }
        },
          name: "map-view",
            mounted() {
                this.initAMap();
                this.cinemaTags()
            },
            methods: {
                // 新增电影院按钮
                addCinema(){
                    this.$refs['form'].validate((valid) => {
                            if (valid) {
                                this.form.tags = this.form.tags.join('-')
                                 console.log(this.form)
                                httpApi.cinemaApi.addCinema(this.form).then(res=>{
                                    console.log("新增影院的结果",res.data);
                                    if(res.data.code == 200){
                                        this.$message({message:"新增影院完成",type:"success"})
                                        this.$router.push('/home/cinema-list')
                                    }else{
                                        this.$message({message:"新增影院失败",type:"error"})
                                    }
                                })
                            }else{
                                this.$message({message:"表单验证失败",type:"error"})

                            }
                        })

                },  
                // 电影院标签
                cinemaTags(){
                    httpApi.cinemaApi.cinemaTags().then(res=>{
                        console.log('+++++',res);
                        this.tagsList = res.data.data
                        
                    })
                },
                initAMap() {
                AMapLoader.load({
                    key: "f5dd6cbc880a07f933294bf0f764406f", // 申请好的Web端开发者Key，首次调用 load 时必填
                    version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
                     plugins: ['AMap.Geocoder'],// 需要使用的的插件列表，如比例尺'AMap.Scale'等
                })
                .then((AMap) => {           // 要显示的容器id
                    //vue2不需要再data中声明map
                    this.map = new AMap.Map("container", {
                            // 设置地图容器id
                        viewMode: "3D", // 是否为3D地图模式
                        zoom: 11, // 初始化地图级别
                        center: [112.960048,28.165389], // 初始化地图中心点位置
                     });
                    //  给地图绑定事件
                    this.map.on('click',(ev)=>{
                        // let lnglat = ev.lnglat;
                        let lng = ev.lnglat.KL
                        let lat = ev.lnglat.kT
                        console.log('选中位置的经纬度是',{lng,lat})
                        //调用AMap.Gecoder插件提供的getAddress做逆地理方式
                        let coder = new AMap.Geocoder();
                        coder.getAddress([lng,lat],(status,result)=>{
                            console.log(status,result)
                            let {province,city,district} = result.regeocode.addressComponent
                            let address = result.regeocode.formattedAddress
                            console.log("解析出来的城市",province,city,district,address)
                            // 回填表单
                            this.form.province = province
                            this.form.address = address
                            this.form.city = city? city:province
                            this.form.district = district
                            this.form.longitude = lng
                            this.form.latitude = lat
                            // 取消所有表单验证的验证消息
                            this.$refs["form"].clearValidate('province')
                            this.$refs["form"].clearValidate('address')
                            this.$refs["form"].clearValidate('city')
                            this.$refs["form"].clearValidate('district')
                            this.$refs["form"].clearValidate('longitude')
                            this.$refs["form"].clearValidate('latitude')

                        })

                    })
                    
                })
                .catch((e) => {
                    console.log(e);
                });
            },
        },
    }
</script>

<style lang="scss" scoped>

</style>